import {storeBindingsBehavior} from "mobx-miniprogram-bindings";
import member from "@src/store/member";
import base from "@src/store/base";

Component({
  options: {
    multipleSlots: true,
    addGlobalClass: true
  },
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['themeColor', 'themeTitleColor'],
  }],
  properties: {
    zIndex: {
      type: Number,
      value: 5000
    },
    closeable: {
      type: Boolean,
      value: true
    },
    title: {
      type: String,
      value: ''
    },
    maskClosable: {
      type: Boolean,
      value: true
    },
    mask: {
      type: Boolean,
      value: true
    },
    show: {
      type: Boolean,
      value: false
    },
    height: {
      type: String,
      value: "80%"
    },
    header: {
      // 是否显示头部
      type: Boolean,
      value: true
    },
    headerLine: {
      // 是否显示头部线
      type: Boolean,
      value: true
    },
    headerBgColor: {
      // 是否显示头部线
      type: String,
      value: ''
    },
    // 是否padding 24
    bodyPadding: {
      type: Boolean,
      value: true
    },
    scrollContent: {
      type: Boolean,
      value: false
    },
    // 是否显示底部按钮
    bottomBtn: {
      type: Boolean,
      value: false
    },
  },
  data: {
    safeBottom: 0,
    bottomHeight: 160,
    headerHeight: 130,
  },
  observers: {
    "show": function (show) {
      if (show) {
        wx.nextTick(()=> {
          this.heightChange();
        })
      }
    }
  },
  lifetimes: {
    ready: function () {
      this.heightChange();
    }
  },
  methods: {
    heightChange() {
      let query = wx.createSelectorQuery().in(this);
      query.select('.half-screen-dialog').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec((res) => {
        let sysInfo = wx.getSystemInfoSync()
        let pixelRatio = 750 / sysInfo.windowWidth;
        let safeBottom = 0;
        if (sysInfo.safeArea.top > 20) {
          console.info("sysInfo.safeArea.top", sysInfo.safeArea.top)
          safeBottom = 64 / pixelRatio
          this.setData({safeBottom: safeBottom})
        }
        let contentHeight = res[0].height
        if(this.data.header) {
          contentHeight = contentHeight - this.data.headerHeight / pixelRatio;
        }
        if (this.data.bottomBtn) {
          contentHeight = contentHeight - this.data.bottomHeight / pixelRatio
        }
        if (this.data.bottomBtn) {
          contentHeight = contentHeight - safeBottom
        }
        this.setData({contentHeight})
        this.triggerEvent('contentHeight', contentHeight);
      })
    },
    open() {
      this.setData({
        show: true
      })
    },
    close(e) {
      const {type} = e.currentTarget.dataset
      if (this.data.maskClosable || type === 'close') {
        this.setData({
          show: false
        })
        this.triggerEvent('close')
      }
    },
    onMaskMouseMove() {
    }
  }
});
